<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>首页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/index.css">
</head>
<body>
<h1>航班查询</h1>
<form action="" onsubmit="return checkForm()">
    <label>日期：
        <input type="text" id="form-date" name="date" value="${param.date}">
    </label>
    <label>城市：</label>
    <input type="text" name="takeCity" value="${param.takeCity}" >到
    <input type="text" name="landingCity" value="${param.landingCity}" >
    <input type="submit" value="搜索">
</form>
<table>
    <thead>
        <tr class="grey">
            <th>航空公司/航班<br/>机型</th>
            <th>起降时间</th>
            <th>机场</th>
            <th>飞行时长</th>
            <th>经停</th>
            <th>参考报价</th>
        </tr>
    </thead>
    <tbdoy>
        <c:choose>
            <c:when test="${empty flights}">
                <tr>
                    <td class="empty-flight" colspan="6">没有找到任何航班信息！</td>
                </tr>
            </c:when>
            <c:otherwise>
                <c:forEach items="${flights}" var="flight" varStatus="status">
                    <tr class="flight-${flight.id} <c:if test="${status.count%2==0}">grey</c:if>">
                        <td>${flight.airline}${flight.code}<br/>${flight.type}</td>
                        <td>
                            <fmt:formatDate value="${flight.takeTime}" pattern="HH:mm"/>
                            <br/><fmt:formatDate value="${flight.landingTime}" pattern="HH:mm"/>
                        </td>
                        <td>
                            ${flight.takeAirport.name}<br>
                            ${flight.landingAirport.name}
                        </td>
                        <td>${flight.flightTime}</td>
                        <td>${empty flight.stopAirport ? "无经停":flight.stopAirport}</td>
                        <td>
                            ￥${flight.referencePrice}<br>
                            <button onclick="showTicket(${flight.id})">查询机票</button>
                        </td>
                    </tr>

                </c:forEach>
            </c:otherwise>
        </c:choose>

    </tbdoy>
</table>

<script src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script>
    function checkForm(){
        let strDate = $("#form-date").val().trim();
        // 没有输入输入日期，则不需要校验
        if (strDate.length===0){
            return true;
        }
        // 需要的日期格式为："yyyy-MM-dd"
        // JS的格式校验使用正则表达式
        let reg = /^(?:(?!0000)[0-9]{4}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-8])|(?:0[13-9]|1[0-2])-(?:29|30)|(?:0[13578]|1[02])-31)|(?:[0-9]{2}(?:0[48]|[2468][048]|[13579][26])|(?:0[48]|[2468][048]|[13579][26])00)-02-29)$/;
        if (!reg.test(strDate)){
            alert("日期格式有误，只能为'yyyy-MM-dd'格式。");
            return false;
        }
        // TODO 可以在提交表单前，将表单的value都先执行trim()操作
        return true;
    }

    function showTicket(flightId) {
        let url = "${pageContext.request.contextPath}/tickets?flightId="+flightId;
        $.get(url,function (data) {
            // 先移除之前展现的机票
            $(".ticket").remove();
            if (data && data.length>0){
                const flightTr = $(".flight-"+flightId);
                // 遍历机票
                $.each(data,function (index,value) {
                    const newTr = "<tr class='ticket'><td colspan='2'>"+value.sellCompany+"</td><td colspan='2'>￥"+value.ticketPrice+"</td></tr>"
                    // 将对应机票放入航班之后
                    flightTr.after($(newTr));
                })
            }
        })
    }


</script>
</body>
</html>
